<template>
    <div>
        <el-input
            size="mini"
            :disabled="disabled"
            v-model="value"
            @input="handleVerifyInput"
            @blur="handleFocusBlur($event, false)"
            @focus="handleFocusBlur($event, true)"
            :precision="precision"
            :class="[colorStyle ? 'font-color-' + colorStyle : '']"
            placeholder="请输入"
            :title="value"
        >
            <template v-if="inputAfter" slot="append">{{ inputAfter }}</template>
        </el-input>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { thousandsFormat, thousandsFormatToNumber } from '@/utils/tools';

@Component({
    name: 'RiskInputNumber2',
})
export default class RiskInputNumber2 extends Vue {
    @Prop()
    input: string;
    @Prop()
    disabled: boolean;
    @Prop()
    maxlength: number;
    @Prop()
    inputAfter: string;
    @Prop()
    colorStyle: string;
    @Prop()
    precision: number;
    @Prop()
    field: string;
    @Prop()
    maxValue: string;

    value: string = '';
    isFocus: boolean = false;
    currentMaxLength: number = 0;

    @Watch('input', { immediate: true, deep: true })
    onWatchValue() {
        this.value = this.clearNoNum(this.input);
    }

    /**
     * 此方法由父组件调用，但父组件进行value变动的时候，由父组件去调用
     */
    dataChange(value: string) {
        console.log('父组件调用子组件方法，用于多次渲染', value);
        this.value = this.clearNoNum(value);
    }

    handleVerifyInput(value) {
        this.value = String(value);
        this.value = value.replace(/[^\d.]/g, ''); // 清除“数字”和“.”以外的字符
        if (this.maxValue) {
            if (Number(this.value) > Number(this.maxValue)) {
                this.value = this.maxValue;
            }
        }
    }

    /**
     * 焦点事件
     */
    handleFocusBlur(action, state) {
        if (state === false) {
            this.value = this.clearNoNum(this.value);
            // console.log(this.value, 'jjjjjjjjjj', Number('22222.01'));
            this.isFocus = false;
            // let arg = Number(thousandsFormatToNumber(this.value));
            let arg = thousandsFormatToNumber(this.value);
            let retValue;
            if (this.value != '0.00') {
                retValue = this.value == '0' ? 0 : arg || '';
            } else {
                retValue = this.value;
            }
            console.log(retValue, 'retValue');

            this.$emit('getInputNumber', retValue, this.field);
        } else {
            this.isFocus = true;
            let num = thousandsFormatToNumber(this.value);
            // this.value = num == undefined || num === '' ? '' : Number(num).toString();
            this.value = num == undefined || num === '' ? '' : num;
        }
    }

    /**
     * 小数点后
     */
    clearNoNum(value) {
        if (!value) {
            return value;
        }
        // debugger;
        value = String(value);
        // value = value.replace(/[^\d.]/g, ''); // 清除“数字”和“.”以外的字符

        if (!value) {
            return '';
        } else {
            try {
                // if (this.maxlength != undefined && value.split('.')[0].length > this.maxlength) {
                //     value = Math.pow(10, this.maxlength) - 1;
                //     if (this.precision != undefined && this.precision > 0) {
                //         value = value + '.' + (Math.pow(10, this.precision) - 1);
                //     }
                // }

                const format = (num, decimals) =>
                    num.toLocaleString('en-US', {
                        minimumFractionDigits: decimals,
                        maximumFractionDigits: decimals,
                    });
                if (this.maxlength != undefined) {
                    if (value.includes('.')) {
                        let integer = value.split('.')[0]; // 整数部分
                        let decimal = value.split('.')[1]; // 小数部分
                        let integerNumber: any = '';
                        if (integer.length > this.maxlength) {
                            // 整数部分大于最大整数位数做处理
                            integerNumber = Number(integer.substring(0, this.maxlength)).toLocaleString();
                        } else {
                            integerNumber = Number(integer).toLocaleString();
                        }
                        if (this.precision != undefined && this.precision > 0) {
                            // 小数部分处理
                            let bits = decimal.length;
                            if (decimal.length && decimal.length > this.precision + 1) {
                                bits = this.precision + 1;
                            }
                            let decimalNumber = Number(decimal.substring(0, bits)) * Math.pow(10, -bits);
                            let test = format(decimalNumber, this.precision);
                            value = integerNumber + '.' + test.split('.')[1];
                        } else {
                            // 不保留小数位时，值只取整数部分
                            value = integerNumber;
                        }
                    } else {
                        value = value.substring(0, this.maxlength);
                        value = Number(value);
                        value = format(value, this.precision);
                    }
                } else {
                    if (this.precision != undefined) {
                        if (value && value.split('.')[0] == '') {
                            value = '';
                            return value;
                        }
                        // value = value.toFixed(this.precision); // toFixed()四舍五入处理有误差,比如11.235
                    }
                    value = Number(value);
                    // value = format(value, this.precision);
                }

                // if (this.precision != undefined) {
                //     if (value && value.split('.')[0] == '') {
                //         value = '';
                //         return value;
                //     }
                //     // value = Number(value);
                //     // value = format(value, this.precision);
                //     // value = value.toFixed(this.precision); // toFixed()四舍五入处理有误差,比如11.235
                // }
                return value;
            } catch (e) {
                return '';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.el-input {
    margin-top: 6px;
    display: inline-table;
    /deep/ .el-input-group__append {
        // padding: 0 10px !important;
    }
    /deep/ .el-input-group {
        display: flex !important;
    }
}

.font-color-red {
    /deep/ input {
        color: red !important;
    }
    /deep/ .el-input-group__append {
        color: red !important;
    }
}
.font-color-green {
    /deep/ input {
        color: green !important;
    }
    /deep/ .el-input-group__append {
        color: green !important;
    }
}
</style>
